<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="zh-CN">
    <%@include file="/WEB-INF/include-head.jsp" %>
    <link rel="stylesheet" href="ztree/zTreeStyle.css"/>
    <script type="text/javascript" src="ztree/jquery.ztree.all-3.5.min.js"></script>
    <script type="text/javascript" src="crowd/my-menu.js"></script>
    <%@include file="/WEB-INF/modal-menu-add.jsp" %>
    <%@include file="/WEB-INF/modal-menu-edit.jsp" %>
    <%@include file="/WEB-INF/modal-menu-confirm.jsp" %>
    <script>
        $(function () {
            // 调用生成树形函数
            generateTree();

            // 给添加子节点按钮绑定点击响应函数
            $('#treeDemo').on('click', '.addBtn', function () {
                // 将当前节点的id,作为新节点的pid保存到全局变量
                window.pid = this.id;

                // 打开模态框
                $('#menuAddModal').modal('show');
                return false;

            })

            // 添加子节点确定按钮发送ajax请求
            $('#menuSaveBtn').click(function () {
                // 获取表单项中用户输入的数据
                var name = $.trim($("#menuAddModal [name=name]").val());
                var url = $.trim($("#menuAddModal [name=url]").val());

                // 单选按钮要定位到“被选中”的那一个
                var icon = $("#menuAddModal [name=icon]:checked").val();
                // 单选按钮要定位到被选中得那一个

                $.ajax({
                    url: "menu/save.json",
                    type: "post",
                    data: {
                        pid: window.pid,
                        name: name,
                        url: url,
                        icon: icon
                    },
                    dataType: "json",
                    success: function (response) {
                        var result = response.result;

                        if (result == "SUCCESS") {
                            layer.msg("添加成功!");
                            // 重新加载树形结构
                            generateTree();
                        }
                        if (result == "FAILED") {
                            layer.msg("添加失败")
                        }
                    },
                    error: function (response) {
                        layer.msg("添加失败,请重试!")
                    }
                })

                // 关闭模态框
                $('#menuAddModal').modal('hide');

                // 清空表单,click函数,
                $('#menuResetBtn').click();

            })

            // 给更新按钮绑定点击响应函数
            $('#treeDemo').on('click', '.editBtn', function () {
                // 将当前节点的id保存到全局变量
                window.id = this.id;

                // 打开模态框
                $('#menuEditModal').modal('show');


                var zTreeObj = $.fn.zTree.getZTreeObj("treeDemo");

                // 根据id属性查询节点对象
                // 用来搜索节点的属性名
                var key = "id";

                // 用来搜索节点的属性值
                var value = window.id;

                var currentNode = zTreeObj.getNodeByParam(key, value);


                // 回显表单数据
                $("#menuEditModal [name=name]").val(currentNode.name);
                $("#menuEditModal [name=url]").val(currentNode.url);

                // 回显radio可以这样理解：被选中的radio的value属性可以组成一个数组，
                // 然后再用这个数组设置回radio，就能够把对应的值选中
                $("#menuEditModal [name=icon]").val([currentNode.icon]);
                return false;

            })


            // 点击更新按钮中的更新发送请求更新
            $('#menuEditBtn').click(function () {
                // 收集表单数据
                var name = $('#menuEditModal [name=name]').val();
                var url = $('#menuEditModal [name=url]').val();
                var icon = $('#menuEditModal [name=icon]:checked').val();


                // 发送Ajax请求
                $.ajax({
                    url: "menu/update.json",
                    type: "post",
                    data: {
                        "id": window.id,
                        "name": name,
                        "url": url,
                        "icon": icon
                    },
                    dataType: "json",
                    success: function (response) {
                        var result = response.result;
                        if (result == "SUCCESS") {
                            layer.msg("操作成功");

                            // 重新加载树形结构
                            generateTree();
                        }
                        if (result == "FAILED") {
                            layer.msg("操作失败!");
                        }
                    },
                    error: function (response) {
                        layer.msg("操作失败");
                    }
                })

                // 关闭模态框
                $("#menuEditModal").modal("hide");
            })

            // 给删除按钮绑定单击响应函数
            $('#treeDemo').on('click', '.removeBtn', function () {
                // 将当前节点的id保存到全局变量
                window.id = this.id;
                // 打开模拟框
                $('#menuConfirmModal').modal("show");

                // 获取 zTreeObj 对象
                var zTreeObj = $.fn.zTree.getZTreeObj("treeDemo");

                // 根据id属性查询节点对象,用来搜索节点的属性名
                var key = "id";

                // 用来搜索节点的属性值
                var value = window.id;

                var currentNode = zTreeObj.getNodeByParam(key, value);

                // 模拟框里面显示删除的图标和文字
                $('#removeNodeSpan').html("【<i class='" + currentNode.icon + "'></i>" + currentNode.name + "】");

                return false;
            })

            $('#confirmBtn').click(function () {
                $.ajax({
                    url: "menu/remove.json",
                    type: "post",
                    data: {
                        id: window.id
                    },
                    dataType: "json",
                    success: function (response) {
                        var result = response.result;
                        if (result == "SUCCESS") {
                            layer.msg("操作成功！");
                            // 刷新树形结构
                            generateTree();
                        }
                        if (result == "FAILED") {
                            layer.msg("操作失败！" + response.message);
                        }
                    },
                    error: function (response) {
                        layer.msg("操作失败" + response.message);
                    }
                })

                // 关闭模态框
                $("#menuConfirmModal").modal("hide");
            })


        })


    </script>

    <body>
        <%@include file="/WEB-INF/include-nav.jsp" %>

        <div class="container-fluid">
            <div class="row">
                <%@include file="/WEB-INF/include-sidebar.jsp" %>
                <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">

                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <i class="glyphicon glyphicon-th-list"></i> 权限菜单列表
                            <div style="float: right; cursor: pointer;" data-toggle="modal"
                                 data-target="#myModal">
                                <i class="glyphicon glyphicon-question-sign"></i>
                            </div>
                        </div>
                        <div class="panel-body">
                            <!-- 这个ul标签是zTree动态生成的节点所依附的静态节点 -->
                            <ul id="treeDemo" class="ztree"></ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
